<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			html,
			body {
				height: 100%;
				background: skyblue;
				position: relative;
			}
			
			.box {
				width: 40px;
				height: 40px;
				background: yellow;
				border-radius: 50%;
				position: absolute;
			}
		</style>
	</head>

	<body>
		<div class="box"></div>
		<script type="text/javascript">
			/*
			 * 1.mousemove
			 * 2.div position
			 * 3.获取当前鼠标的坐标
			 * 4.将坐标赋值到div上
			 * 5.保持鼠标在div的中心点
			 */
			var box = document.querySelector(".box");
			window.addEventListener("mousemove", function(e) {
				var x = e.clientX - 20;
				var y = e.clientY - 20;
				console.log(x, y);
				box.setAttribute("style", "left: " + x + "px; top:" + y + "px;");
			})
		</script>
	</body>

</html>